<template>
  <div class="address" v-for="(item, index) in resData" :key="item.id">
    <div class="steps" :style="item.title ? '' : 'display:none'">{{ item.title }}</div>
    <div class="image_list">
      <div class="image_list_item">
        <div class="title" v-if="item.text">
          <div class="icon"></div>
          <div v-if="!item.colorTitle" class="title_text"
            >({{ index + 1 }}) {{ item.text }} <span style="color: #2290ff">{{ item.text2 }}</span></div
          >
        </div>
        <div class="title" v-else>
          <div class="icon"></div>
          <div>从<a style="color: #2290ff;text-decoration:none;cursor:pointer" href="https://work.weixin.qq.com/">企业微信官网</a>进入管理后台, 扫码登录平台</div>
        </div>
        <div class="module" v-if="item.isShowUrl">
          <el-form label-position="right" label-width="130px" :model="infoData">
            <el-form-item label="URL">
              <el-input disabled size="small" v-model="infoData.contact.url" />
              <el-button v-if="infoData.contact.url" type="text" @click="Copy(infoData.contact.url)">复制名称</el-button>
            </el-form-item>
            <el-form-item label="Token">
              <el-input disabled size="small" v-model="infoData.token" />
              <el-button v-if="infoData.token" type="text" @click="Copy(infoData.token)">复制名称</el-button>
            </el-form-item>
            <el-form-item label="EncodingAESKey">
              <el-input disabled size="small" v-model="infoData.aeskey" />
              <el-button v-if="infoData.aeskey" type="text" @click="Copy(infoData.aeskey)">复制名称</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="warning" v-if="item.warning">
          <div class="warning_icon">!</div>
          <div style="color: #d59171; font-size: 12px">{{ item.warning }}</div>
        </div>
        <div class="img" v-if="!item.isShowImg">
          <img src="@/assets/addressConfig/1.png" alt="" v-show="item.id === 1" />
          <img src="@/assets/addressConfig/2.png" alt="" v-show="item.id === 2" />
          <img src="@/assets/addressConfig/3.png" alt="" v-show="item.id === 3" />
          <img src="@/assets/addressConfig/4.png" alt="" v-show="item.id === 4" />
          <img src="@/assets/addressConfig/6.png" alt="" v-show="item.id === 6" />
          <img src="@/assets/addressConfig/7.png" alt="" v-show="item.id === 7" />
          <img src="@/assets/addressConfig/11.png" alt="" v-show="item.id === 11" />
          <img src="@/assets/addressConfig/16.png" alt="" v-show="item.id === 16" />
          <img src="@/assets/addressConfig/1-1.png" alt="" v-show="item.id === '1-1'" />
          <img src="@/assets/addressConfig/1-2.png" alt="" v-show="item.id === '1-2'" />
          <img src="@/assets/addressConfig/1-3.png" alt="" v-show="item.id === '1-3'" />
        </div>
        <div class="img top" v-if="!item.isTwoImg">
          <img src="@/assets/addressConfig/5.png" alt="" v-show="item.twoImg === 5" />
          <img src="@/assets/addressConfig/7.png" alt="" v-show="item.twoImg === 7" />
          <img src="@/assets/addressConfig/12.png" alt="" v-show="item.isTwoImg === 12" />
          <img src="@/assets/addressConfig/1-4.png" alt="" v-show="item.twoImg === '1-4'" />
        </div>
        <div class="qwImgs" v-if="item.isImgList">
          <div class="list">
            <div class="list_item" v-for="v in item.isImgList" :key="v.imgId">
              <p class="text" :style="v.qw_text ? '' : 'display:none'">{{ v.qw_text }}</p>
              <img v-show="v.imgId === 8" src="@/assets/addressConfig/8.png" alt="" />
              <img v-show="v.imgId === 9" src="@/assets/addressConfig/9.png" alt="" />
              <img v-show="v.imgId === 10" src="@/assets/addressConfig/10.png" alt="" />
              <img v-show="v.imgId === 13" src="@/assets/addressConfig/13.png" alt="" />
              <img v-show="v.imgId === 14" src="@/assets/addressConfig/14.png" alt="" />
              <img v-show="v.imgId === 15" src="@/assets/addressConfig/15.png" alt="" />
              <img v-show="v.imgId === '1-5'" src="@/assets/addressConfig/1-5.png" alt="" />
              <img v-show="v.imgId === '1-6'" src="@/assets/addressConfig/1-6.png" alt="" />
              <img v-show="v.imgId === '1-7'" src="@/assets/addressConfig/1-7.png" alt="" />
            </div>
          </div>
          <div v-if="showSecretBox" class="module">
            <!-- <el-form label-position="right" :model="infoData" v-show="item.isShowInput">
              <el-form-item label="Secret">
                <el-input disabled size="small" v-model="infoData.contact.secret" placeholder="请输入" />
                <el-button v-if="infoData.contact.url" type="text" @click="Copy(infoData.contact.secret)">复制名称 </el-button>
              </el-form-item>
            </el-form> -->
            <el-form label-position="right" :model="infoData">
              <el-form-item label="Secret">
                <el-input v-model="infoData.contact.secret" style="width: 570px" :disabled="!showSecret1" placeholder="请输入" />
                <template v-if="showSecret1">
                  <el-button @click="showSecret1 = false">取消</el-button>
                  <el-button type="primary" @click="onUpdateSecret(secretType)">保存</el-button>
                </template>
                <el-button v-else @click="showSecret1 = true">修改</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineProps, reactive, ref, watch } from 'vue'
  import useClipboard from 'vue-clipboard3'
  import { ElMessage } from 'element-plus'
  import { getChannelConfigInfo, setContactSecret, setCustomerSecret, getChannelConfigState, getInstallUrl } from '@/api/channel/authconfig'

  const { toClipboard } = useClipboard()

  const props = withDefaults(
    defineProps<{
      resData: any
      showSecretBox: boolean
      secretType: number
    }>(),
    {
      resData: [{}],
      showSecretBox: true,
      secretType: 1 //1 企业配置  2客户配置
    }
  )
  interface InfoData {
    suite_auth: boolean
    customized_app_auth: boolean
    suite_auth_at: string
    token: string
    aeskey: string
    corp_info: any
    contact: any
    customer: any
  }
  const showSecret1 = ref(false)
  const showSecret2 = ref(false)
  let infoData: InfoData = reactive({
    suite_auth: false,
    customized_app_auth: false,
    suite_auth_at: '',
    token: '',
    aeskey: '',
    corp_info: {},
    contact: {},
    customer: {}
  })
  const creatData = (v: number = 1) => {
    getChannelConfigInfo().then((res: any) => {
      infoData.suite_auth = res.suite_auth || false
      infoData.customized_app_auth = res.customized_app_auth || false
      infoData.suite_auth_at = res.suite_auth_at || ''
      infoData.token = res.token || ''
      infoData.aeskey = res.aeskey || ''
      infoData.corp_info = res.corp_info || {}
      infoData.contact = v == 1 ? res.contact || {} : res.customer || {}
      infoData.customer = res.customer || {}
    })
  }
  watch(
    () => props.secretType,
    (v: number) => {
      creatData(v)
    },
    { immediate: true }
  )
  const Copy = async (val: any) => {
    try {
      await toClipboard(val)
      ElMessage.success('复制成功')
    } catch (e) {
      ElMessage.error('复制失败')
    }
  }
  const onUpdateSecret = (t: number) => {
    const { contact, customer } = infoData
    if (t === 1) {
      setContactSecret({ secret: contact.secret }).then(() => {
        ElMessage.success('修改成功')
        showSecret1.value = false
      })
    }
    if (t === 2) {
      setCustomerSecret({ secret: customer.secret }).then(() => {
        ElMessage.success('修改成功')
        // showSecret2.value = false
        showSecret1.value = false
      })
    }
  }
</script>

<style lang="scss" scopedF>
  .address {
    margin-top: 20px;

    .steps {
      font-size: 16px;
    }

    .image_list {
      &_item {
        .title {
          width: 700px;
          // height: 36px;
          font-size: 14px;
          display: flex;
          align-items: center;
          background-color: #eff8ff;
          padding: 6px 15px;
          box-sizing: border-box;
          margin: 16px 0;

          .icon {
            width: 5px;
            height: 5px;
            margin-right: 15px;
            border-radius: 50%;
            background-color: #2290ff;
          }
          &_text {
            line-height: 20px;
          }

          .text {
            color: #2290ff;
          }
        }

        :deep .el-result {
          width: 10px;
          height: 10px;
        }

        :deep .el-result__icon {
          width: 100%;
          height: 100%;
        }

        .warning {
          display: flex;
          align-items: center;
          width: 700px;
          height: 42px;
          padding: 0 20px;
          margin-bottom: 10px;
          box-sizing: border-box;
          background: #fff7f0;

          &_icon {
            width: 15px;
            height: 15px;
            font-size: 12px;
            border-radius: 50%;
            text-align: center;
            line-height: 15px;
            margin-right: 10px;
            color: #fff;
            background-color: #faad15;
          }
        }

        .img {
          width: 700px;

          img {
            width: 100%;
          }
        }

        .top {
          margin-top: 20px;
        }

        .qwImgs {
          .module {
            width: 790px;
            margin: 20px 0;

            .title-box {
              margin-bottom: 20px;
              padding-left: 16px;
              border-left: 4px solid #ff6b00;

              .guide-box {
                margin-left: 20px;
                color: #ff6b00;
              }
            }

            .impower_matter {
              margin-top: 21px;
              width: 100%;
              display: flex;
              flex-direction: row;

              .left {
                width: 500px;
                display: flex;
                flex-direction: column;
                margin-right: 15px;

                .text {
                  width: 100%;
                  height: 15px;
                  display: flex;
                  flex-direction: row;
                  margin-bottom: 20px;
                  color: #33302d;

                  &:last-of-type {
                    margin-bottom: 0;
                  }

                  .wordy {
                    width: 130px;
                    text-align: right;
                  }
                }
              }

              .box {
                width: 800px;
                height: 150px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;

                .left {
                  width: 80px;
                }

                .right {
                  height: 70px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: space-evenly;
                  color: #969696;
                  line-height: 20px;

                  .tip-word {
                    margin-bottom: 10px;
                  }
                }
              }
            }

            .el-form {
              .el-form-item {
                margin-bottom: 16px;

                .el-input {
                  width: 550px;
                }

                .el-button {
                  margin-left: 10px;
                }

                &:last-of-type {
                  margin-bottom: 0;
                }
              }
            }
          }

          .disInput {
            display: flex;
            align-items: center;

            .label {
              font-size: 14px;
              margin-right: 10px;
            }

            .input {
              width: 300px;
            }
          }

          .list {
            display: flex;
            align-items: center;
            justify-content: space-between;

            &_item {
              width: 220px;

              .text {
                width: 165px;
                line-height: 20px;
                min-height: 30px;
                font-size: 14px;
                margin: 22px 0;
              }

              img {
                width: 100%;
                // height: 100%;
              }
            }
          }
        }

        .urlList {
          &_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;

            .url {
              width: 600px;
              padding: 10px;
              box-sizing: border-box;
              background: #f9f9f9;
              color: #959595;

              .text {
                width: 100%;
                white-space: wrap;
              }
            }

            .copyBtn {
              font-size: 12px;
              color: #fff;
              border-radius: 3px;
              padding: 5px 12px;
              background: #2190ff;
              cursor: pointer;
            }
          }
        }

        .module {
          margin-bottom: 40px;

          .title-box {
            margin-bottom: 20px;
            padding-left: 16px;
            border-left: 4px solid #ff6b00;

            .guide-box {
              margin-left: 20px;
              color: #ff6b00;
            }
          }

          .impower_matter {
            margin-top: 21px;
            width: 100%;
            display: flex;
            flex-direction: row;

            .left {
              width: 500px;
              display: flex;
              flex-direction: column;
              margin-right: 15px;

              .text {
                width: 100%;
                height: 15px;
                display: flex;
                flex-direction: row;
                margin-bottom: 20px;
                color: #33302d;

                &:last-of-type {
                  margin-bottom: 0;
                }

                .wordy {
                  width: 130px;
                  text-align: right;
                }
              }
            }

            .box {
              width: 800px;
              height: 150px;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;

              .left {
                width: 80px;
              }

              .right {
                height: 70px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-evenly;
                color: #969696;
                line-height: 20px;

                .tip-word {
                  margin-bottom: 10px;
                }
              }
            }
          }

          .el-form {
            .el-form-item {
              margin-bottom: 16px;

              .el-input {
                width: 500px;
              }

              .el-button {
                margin-left: 10px;
              }

              &:last-of-type {
                margin-bottom: 0;
              }
            }
          }
        }
      }
    }
  }
</style>
